<template>
	<view class="container">
		<u-form :model="formModel" ref="fromRules" label-width='160rpx'>
			<u-form-item label="昵称" prop="nickname" :required='true'><u-input v-model="formModel.nickname" placeholder='请输入昵称' maxlength='20'/></u-form-item>
			<u-form-item label="性别" prop="genderText" :required='true'>
				<!-- <u-input v-model="formModel.genderText" placeholder='请选择性别' @click='genderActionShow = true' type="select" /> -->
				<view class="item" @click='genderActionShow = true'>
					<text class="value" v-if="formModel.gender">{{formModel.gender=='M'?'男':'女'}}</text>
					<text class="placeholder" v-if="!formModel.gender">请选择性别</text>
					<u-picker :show="genderActionShow" :columns="genderList" keyName="label" @confirm='genderAction' :defaultIndex='genderDefauleValue' @cancel='genderActionShow=false'></u-picker>
				</view>
			</u-form-item>
			<u-form-item label="出生日期" prop="birthday" :required='true'>
				<!-- <u-input v-model="formModel.birthday" placeholder='请选择出生日期' disabled @click='dateActionShow = true' type="select" /> -->
				<view class="item" @click='dateActionShow = true'>
					<text class="value" v-if="formModel.birthday">{{$time.dateFormat('yyyy-mm-dd', formModel.birthday)}}</text>
					<text class="placeholder" v-if="!formModel.birthday">请选择出生日期</text>
					<u-datetime-picker @cancel='dateActionShow=false' :show="dateActionShow" @confirm='dateAction' @ v-model="formModel.birthday" mode="date" :minDate='0' :maxDate='maxDate'></u-datetime-picker>
				</view>
				
			</u-form-item>
			<!-- <view class="tips"><text>岁</text> <text>sds</text></view> -->
			<!-- <u-form-item label="公司性质" prop="business"><u-input v-model="formModel.business" placeholder='请输入公司性质' maxlength='20'/></u-form-item> -->
			<u-form-item label="职业" prop="job" :required='true'>
				<u-input v-model="formModel.job" placeholder='请输入职业' maxlength='20'/>
			</u-form-item>
			<u-form-item label="身高(cm)" prop="height" :required='true'>
				<view class="item" @click='heightActionShow = true'>
					<text class="value" v-if="formModel.height">{{formModel.height}}</text>
					<text class="placeholder" v-if="!formModel.height">请选择身高</text>
					<u-picker :show="heightActionShow" :columns="heightList" keyName="label" @confirm='heightAction' :defaultIndex='heightDefauleValue' @cancel='heightActionShow=false'></u-picker>
				</view>
				<!-- <u-input v-model="formModel.height" placeholder='请选择身高' @click='heightActionShow = true' type="select" /> -->
			</u-form-item>
			<u-form-item label="体重(kg)" prop="weight" :required='true'>
				<view class="item" @click='weightActionShow = true'>
					<text class="value" v-if="formModel.weight">{{formModel.weight}}</text>
					<text class="placeholder" v-if="!formModel.weight">请选择身高</text>
					<u-picker :show="weightActionShow" :columns='weightList' keyName="label" @confirm='weightAction' :defaultIndex='weightDefauleValue' @cancel='weightActionShow=false'></u-picker>
				</view>
			</u-form-item>
			<u-form-item label="现居地" prop="city" :required='true'>
				<view class="item" @click='selectCity'>
					<text class="value" v-if="formModel.city">{{formModel.city}}</text>
					<text class="placeholder" v-if="!formModel.city">请选择现居地</text>
				</view>
			</u-form-item>
			<u-form-item label="陪玩价" prop="sellingPrice" :required='true'>
				<u--input placeholder="请输入" v-model="formModel.sellingPrice" type='digit'></u--input>
			</u-form-item>
			<u-form :model="formModel" ref="fromRules" label-width='160rpx' labelPosition="top">
				<u-form-item label="标签" prop="sellingPrice" :required='true'>
					<view class="tagContent">
						<view @click="tagClick(item, index)" class="default" :class="item.select ? 'spec_sel' : 'spec'"
						 v-for="(item, index) in tagList" :key='index'>{{item.name}}</view>
					</view>
				</u-form-item>
				<u-form-item label="自我描述" prop="intro_zwms" :required='true'>
					<u--textarea fixed='true' v-model="formModel.intro_zwms" type='textarea' border='surround' maxlength='500' height='200rpx' placeholder='请输入自我介绍或兴趣爱好～' />
				</u-form-item>
				<u-form-item label="上传照片" prop="city" :required='true'>
					<view class="photoList">
						<u-upload
							:fileList="fileList"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="9"
							:maxSize='1024*1024'
							:previewImage='true'
							></u-upload>
						<!-- <view class="submit" v-if="fileList.length < 1" style="background-color: #999999;">保存</view> -->
						<!-- <view v-if="fileList.length < 1" style="color: #d32900;width: 100%;text-align: center;">至少保留一张精美照片</view>
						<view class="submit" v-else @click="submitTap">保存</view> -->
					</view>
				</u-form-item>
			</u-form>
			
			<!-- <u-form-item label="家乡">
				<view class="item" @click='selectArea'>
					<text class="value" v-if="formModel.area">{{formModel.area}}</text>
					<text class="placeholder" v-if="!formModel.area">请选择家乡</text>
				</view>
			</u-form-item> -->
			<!-- <u-form-item label="学历" prop="education">
				<view class="item" @click='educationActionShow = true'>
					<text class="value" v-if="formModel.education">{{formModel.education}}</text>
					<text class="placeholder" v-if="!formModel.education">请选择学历</text>
					<u-picker :show="educationActionShow" :columns='educationList' keyName="label" @confirm='educationAction' :defaultIndex='educationDefauleValue' @cancel='educationActionShow=false'></u-picker>
				</view>
			</u-form-item>
			<u-form-item label="感情状况" prop="marriage">
				<view class="item" @click='marriageActionShow = true'>
					<text class="value" v-if="formModel.marriage">{{formModel.marriage}}</text>
					<text class="placeholder" v-if="!formModel.marriage">请选择感情状况</text>
					<u-picker :show="marriageActionShow" :columns='marriageList' keyName="label" @confirm='marriageAction' :defaultIndex='marriageDefauleValue' @cancel='marriageActionShow=false'></u-picker>
				</view>
			</u-form-item> -->
			<!-- <u-form-item label="微信" prop="weixin"><u-input v-model="formModel.weixin" placeholder='请输入微信号' /></u-form-item> -->
			
		</u-form>
		<!-- 性别选择器 -->
		<u-action-sheet :list="genderList" v-model="genderActionShow" @click="genderAction"></u-action-sheet>
		<!-- 身高选择器 -->
		<!-- <u-select v-model="heightActionShow" @confirm='heightAction' :list='heightList' :default-value='heightDefauleValue'></u-select> -->
		<!-- 体重选择器 -->
		<!-- <u-select v-model="weightActionShow" @confirm='weightAction' :list='weightList' :default-value='weightDefauleValue'></u-select> -->
		<!-- 学历选择器 -->
		<!-- <u-select v-model="educationActionShow" @confirm='educationAction' :list='educationList' :default-value='educationDefauleValue'></u-select> -->
		<!-- 婚姻选择器 -->
		<!-- <u-select v-model="marriageActionShow" @confirm='marriageAction' :list='marriageList' :default-value='marriageDefauleValue'></u-select> -->
		<!-- 地区选择器 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
		<!-- 家乡选择器 -->
		<simple-address ref="simpleAddressForArea" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirmForArea" themeColor='#007AFF'></simple-address>
		<!-- 工作单位 -->
		<!-- <u-select v-model="workUnitShow" :list="workUnitList" :default-value='workUnitDefaultValue' @confirm='workUnitConfirm'></u-select> -->
		<view class="footer">
			<jc-button :width="600" title='确认并提交' @click='submit'></jc-button>
		</view>
	</view>
</template>

<script>
	import {
		user
	} from '@/api/user.js'
	import {
		common
	} from '@/api/common.js'
	import {uploadApi} from '@/api/baseUrl.js'
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default{
		components:{ simpleAddress},
		data() {
			return {
				userInfo: {},
				formModel: {},
				fromRules: {
					nickname: [{ required: true, message: '请输入昵称', trigger: ['change','blur']}],
					// genderText: [{required: true, message: '请选择性别', trigger: ['change','blur']}],
					birthday: [{required: true, message: '请选择出生日期', trigger: ['change','blur']}],
					height: [{required: true, message: '请选择身高', trigger: ['change','blur']}],
					// marriage: [{required: true, message: '请选择感情状况', trigger: ['change','blur']}],
				},
				genderActionShow: false,
				genderList:[[{ label: '男', id: 'M' }, { label: '女', id: 'W' }]],
				maxDate: Number(new Date()),
				dateActionShow: false,
				heightActionShow: false,
				weightActionShow: false,
				educationActionShow: false,
				marriageActionShow: false,
				cityPickerValueDefault: [0, 0, 1],
				heightList: [],
				heightDefauleValue: [35],
				weightList: [],
				weightDefauleValue: [35],
				educationList: [[{
					id: 1,
					label: '大专以下'
				}, {
					id: 2,
					label: '大专'
				}, {
					id: 3,
					label: '本科'
				}, {
					id: 4,
					label: '硕士及以上'
				}]],
				educationDefauleValue: [3],
				marriageList: [[{
					id: 1,
					label: '未婚'
				}, {
					id: 2,
					label: '离异'
				}, {
					id: 3,
					label: '丧偶'
				}]],
				marriageDefauleValue: [1],
				workUnitShow: false,
				workUnitList: [],
				workUnitDefaultValue: [],
				genderDefauleValue: [],
				fileList: [],
				photoList: [],
				tagList: []
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			this.getHeightList()
			this.getWeightList()
			this.getTagList()
		},
		onReady() {
			this.$refs.fromRules.setRules(this.fromRules)
		},
		methods:{
			getTagList() {
				common.operateActionGet('/system/tag/', {}).then(res => {
					if (res.data.code == 10000) {
						this.tagList = res.data.data.list
					}
				})
			},
			tagClick(item, index){
				if(item.select){
					this.$set(item, 'select', false)
				}else{
					this.$set(item, 'select', true)
				}
			},
			getHeightList() {
				var heightList = []
				for (var i = 0; i <= 80; i++) {
					var item = {}
					item.label = i + 140
					item.id = i
					heightList.push(item)
				}
				this.heightList[0] = heightList
			},
			getWeightList() {
				var weightList = []
				for (var i = 0; i <= 80; i++) {
					var item = {}
					item.label = i + 40
					item.id = i
					weightList.push(item)
				}
				this.weightList[0] = weightList
			},
			avatarUploadSuccess(e){
				console.log(11, e)
				this.formModel.avatarUrl = e
			},
			//性别选择
			genderAction(e){
				console.log('性别', e)
				this.genderActionShow = false
				this.genderDefauleValue = [e.value[0].id]
				this.formModel.gender = e.value[0].id
			},
			//日期选择
			dateAction(date){
				console.log('日期', date)
				this.dateActionShow = false
				this.formModel.birthday = new Date(date.value)
				this.formModel.age = this.$tools.getAge(this.$time.dateFormat('yyyy-mm-dd', this.formModel.birthday))
				this.formModel.constellation = this.$tools.getAstro(date.month, date.day)
			},
			//选择身高
			heightAction(e){
				console.log('身高', e)
				this.heightActionShow = false
				this.heightDefauleValue = [e.value[0].id]
				this.formModel.height = e.value[0].label
			},
			//选择体重
			weightAction(e){
				console.log('体重', e)
				this.weightActionShow = false
				this.weightDefauleValue = [e.value[0].id]
				this.formModel.weight = e.value[0].label
			},
			//月收入
			salaryAction(e) {
				console.log('月收入', e)
				this.salaryActionShow = false
				this.salaryDefauleValue = [e.value[0].id]
				this.formModel.salary = e.value[0].label
			},
			//选择学历
			educationAction(e) {
				console.log('学历', e)
				this.educationActionShow = false
				this.educationDefauleValue = [e.value[0].id]
				this.formModel.education = e.value[0].label
			},
			//选择婚姻状况
			marriageAction(e) {
				console.log('婚姻状况', e)
				this.marriageActionShow = false
				this.marriageDefauleValue = [e.value[0].id]
				this.formModel.marriage = e.value[0].label
			},
			//选择所在地
			selectCity(){
				this.$refs.simpleAddress.open()
			},
			//选择所在地回调
			onConfirm(e) {
				console.log('选择现居地', e)
				var city = e.labelArr[1]=='市辖区'?'':e.labelArr[1]
				this.formModel.city = e.labelArr[0]+city
			},
			//选择家乡
			selectArea(){
				this.$refs.simpleAddressForArea.open()
			},
			//选择家乡回调
			onConfirmForArea(e) {
				console.log('选择家乡', e)
				var city = e.labelArr[1]=='市辖区'?'':e.labelArr[1]
				this.formModel.area = e.labelArr[0]+city  //.replace(/-/g,'，')
			},
			//单位选择
			selectUnit(){
				this.$Router.push({
					name: 'selectUnit'
				})
			},
			selectUnitBack(unit){
				this.dept = unit
				this.formModel.dept = unit.id
				this.formModel.unit = unit.unit
			},
			async afterRead(event){
				console.log('afterRead', event)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.publishTap(lists[i].thumb)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						image_id: result
					}))
					fileListLen++
				}
				console.log('filelist', this.fileList)
			},
			deletePic(event){
				console.log('deletePic', event)
				this.fileList.splice(event.index, 1)
			},
			publishTap(url){
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: uploadApi,
						filePath: url,
						name: 'file',
						method: 'POST',
						timeout: 30000,
						header: {
							"clientname": this.$store.state.clientname,
							'Authorization': 'token ' + this.$storage.getStorageDataSync(this.$store.state.token),
							'content-type': 'multipart/form-data' // 走网关的接口,一定要加上这个,要不支付宝小程序上传不成功
						},
						success: (uploadFileRes) => {
							var res = JSON.parse(uploadFileRes.data)
							console.log('uploadFileRes', JSON.parse(uploadFileRes.data))
							if (res.code == 10000) {
								// elem.id = res.data.image.id
								// elem.url = upload_baseUrl + res.data.image.fileName
								// that.photos.push(res.data.image.id)
								resolve(res.data.image.id)
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
						}
					})
				})
			},
			//提交表单
			submit() {
				if(!this.formModel.nickname){
					this.$show.showMessage('昵称必填')
					return
				}
				if(!this.formModel.birthday){
					this.$show.showMessage('出生日期必填')
					return
				}
				if(!this.formModel.height){
					this.$show.showMessage('身高必填')
					return
				}
				this.updateUserInfo()
			},
			
			updateUserInfo(){
				var params = {}
				if(this.formModel.nickname != this.userInfo.nickname){
					params['nickname'] = this.formModel.nickname
				}
				if(this.formModel.gender != this.userInfo.gender){
					params['gender'] = this.formModel.gender
				}
				if(this.formModel.birthday != this.userInfo.birthday){
					params['birthday'] = new Date(this.formModel.birthday)
				}
				if(this.formModel.dept != this.userInfo.dept){
					params['dept'] = this.formModel.dept
				}
				if(this.formModel.business != this.userInfo.business){
					params['business'] = this.formModel.business
				}
				if(this.formModel.job != this.userInfo.job){
					params['job'] = this.formModel.job
				}
				if(this.formModel.height != this.userInfo.height){
					params['height'] = this.formModel.height
				}
				if(this.formModel.weight != this.userInfo.weight){
					params['weight'] = this.formModel.weight
				}
				if(this.formModel.city != this.userInfo.city){
					params['city'] = this.formModel.city
				}
				if(this.formModel.area != this.userInfo.area){
					params['area'] = this.formModel.area
				}
				if(this.formModel.education != this.userInfo.education){
					params['education'] = this.formModel.education
				}
				if(this.formModel.marriage != this.userInfo.marriage){
					params['marriage'] = this.formModel.marriage
				}
				if(this.formModel.age != this.userInfo.age){
					params['age'] = this.formModel.age
				}
				if(this.formModel.constellation != this.userInfo.constellation){
					params['constellation'] = this.formModel.constellation
				}
				if(this.formModel.sellingPrice != this.userInfo.sellingPrice){
					params['sellingPrice'] = this.formModel.sellingPrice
				}
				if(this.formModel.intro_zwms != this.userInfo.intro_zwms){
					params['intro_zwms'] = this.formModel.intro_zwms
				}
				// 照片
				var photos = []
				for(var item of this.fileList){
					photos.push(item.image_id)
				}
				params['photos'] = photos
				// 标签
				var tags = []
				for(var item of this.tagList){
					if(item.select){
						tags.push(item.id)
					}
				}
				params['tags'] = tags
				params['checkStatus'] = 'CHECKING'
				let that = this
				user.updateUser(params).then(res => {
					if(res.data.code == 10000){
						this.userInfo = JSON.parse(JSON.stringify(res.data.data))
						uni.navigateBack()
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					}
				})
			},
			getUserInfo(){
				user.getUserInfo().then(res => {
					var userInfo = res.data.data
					this.userInfo = JSON.parse(JSON.stringify(userInfo))
					
					if(userInfo.gender == 'M'){
						userInfo.genderText = '男'
					}else if(userInfo.gender == 'W'){
						userInfo.genderText = '女'
					}
					userInfo.height = String(userInfo.height)
					this.formModel = userInfo
					this.photoList = userInfo.photoList
					this.photoList.forEach(elem=>{
						this.fileList.push({
							image_id: elem.id,
							url: elem.url,
						})
					})
					
				})
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		height: 100%;
		border-bottom: 80rpx;
	}
	.uploadButton{
		width: 80%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.item{
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		border: 1px solid #dddddd;
		.placeholder{
			margin-left: 20rpx;
			color: #999999;
		}
		.value{
			margin-left: 20rpx;
			font-size: 30rpx;
		}
	}
	.footer{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80rpx;
		margin-bottom: 80rpx;
		
	}
	.tagContent {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	
		.default {
			margin: 20rpx 0;
			padding: 0 35rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
			font-size: 26rpx;
		}
	
		.spec {
			background-color: #EEEEEE;
			border: #EEEEEE 1px solid;
		}
	
		.spec_sel {
			background-color: #fefefe;
			border: #007aff 1px solid;
			color: #007aff !important;
		}
	}
</style>
